<template>
  <FormItem v-bind="formItemProps" :rules="computeRules" :disabled="inputDisabled">
    <template #default>
      <slot>
        <RichTextEditor
          :class="{ 'is-readonly': readonly }"
          :value="value"
          :readonly="readonly"
          :maxlength="maxLength"
          :disabled="inputDisabled"
          clearable
          :placeholder="inputDisabled ? '' : computePlaceholder"
          v-bind="$attrs"
          v-on="listeners"
          @input="val => $emit('input', val)" />
      </slot>
    </template>
    <template #error="{ error }">
      <div v-if="$scopedSlots.error && $scopedSlots.error(error)" class="el-form-item__error">
        <slot name="error" :error="error">{{ error }}</slot>
      </div>
    </template>
    <template #label>
      <slot name="label"></slot>
    </template>
    <template #tips>
      <slot name="tips"></slot>
    </template>
  </FormItem>
</template>

<script>
  import formInput from '@/components/form/form-input'
  import RichTextEditor from '@/components/RichTextEditor.vue'

  export default {
    name: 'FormRichTextEditor',
    components: { RichTextEditor },
    mixins: [formInput],
    props: {
      value: String,
      maxLength: {
        type: String,
        default: '200'
      }
    }
  }
</script>
